import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import Tabs from '@/components/tabs/Index'
import { Button, TabPane } from 'ant-design-vue'
import Paywage from './components/Paywage'
import EleSign from './components/EleSign'
import Period from './components/Period'
import Daily from './components/Daily'

import { getCompanyDetail } from '@/api/company'
import type { CompanyDetailDto } from '@/api/company/types'


@Component
export class Recharge extends Render {
    activeName = 'paywage'

    companyId = null as null | number

    companyDetail = {} as CompanyDetailDto

    async initData() {
        const res = await getCompanyDetail({
            companyId: this.companyId as number
        })
        return res
    }

    async created() {
        if (this.$route.query.companyId) {
            this.companyId = Number(this.$route.query.companyId)
            this.companyDetail = await this.initData()
        }
    }

    render() {
        return (
            <div class="p-20px h-full flex flex-col">
                <div class="flex-1">
                    <Tabs class="custom-tabs" v-model={this.activeName} >
                        <TabPane tab="发薪专户" key="paywage">
                            <Paywage companyDetail={this.companyDetail}/>
                        </TabPane>
                        <TabPane tab="长期保" key="period">
                            <Period companyDetail={this.companyDetail}/>
                        </TabPane>
                        <TabPane tab="日日保" key="daily">
                            <Daily companyDetail={this.companyDetail}/>
                        </TabPane>
                        <TabPane tab="电子合同" key="eleSign">
                            <EleSign companyDetail={this.companyDetail}/>
                        </TabPane>

                    </Tabs>
                </div>
            </div>
        )
    }
}

export default toNative<{}, {}>(Recharge)
